<template>
  <div class="image-format">
    <header class="header">
      <div class="header-content">
        <router-link to="/" class="back-button">
          <el-button icon="el-icon-back">返回首页</el-button>
        </router-link>
        <div class="title-container">
          <h1>图片格式转换</h1>
          <p class="subtitle">支持多种图片格式互转，快速且高效</p>
        </div>
      </div>
    </header>

    <el-card class="format-card">
      <el-upload
        class="upload-demo"
        drag
        action="/api/image/convert"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :data="{ format: targetFormat }"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽图片到此处或 <em>点击上传</em>
        </div>
      </el-upload>
      
      <div class="format-options">
        <span class="label">目标格式：</span>
        <el-select v-model="targetFormat" placeholder="选择目标格式">
          <el-option label="JPG" value="jpg" />
          <el-option label="PNG" value="png" />
          <el-option label="WebP" value="webp" />
        </el-select>
      </div>
    </el-card>

    <el-dialog v-model="showPreview" title="转换预览">
      <div class="preview-container">
        <div class="preview-item">
          <h4>原图</h4>
          <img :src="originalImage" alt="原图" v-if="originalImage" />
          <p>原始格式：{{ originalFormat }}</p>
        </div>
        <div class="preview-item">
          <h4>转换后</h4>
          <img :src="convertedImage" alt="转换后" v-if="convertedImage" />
          <p>目标格式：{{ targetFormat.toUpperCase() }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const targetFormat = ref('jpg')
const showPreview = ref(false)
const originalImage = ref('')
const convertedImage = ref('')
const originalFormat = ref('')

const beforeUpload = (file: File) => {
  if (!file.type.includes('image/')) {
    ElMessage.error('请上传图片文件')
    return false
  }
  originalFormat.value = file.type.split('/')[1].toUpperCase()
  const reader = new FileReader()
  reader.onload = (e) => {
    originalImage.value = e.target?.result as string
  }
  reader.readAsDataURL(file)
  return true
}

const handleSuccess = (response: any) => {
  ElMessage.success('格式转换成功')
  convertedImage.value = `/api/image/download/${response.filename}`
  showPreview.value = true
}

const handleError = () => {
  ElMessage.error('格式转换失败')
}
</script>

<style scoped>
.image-format {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.header-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

.back-button {
  position: absolute;
  left: 2rem;
  text-decoration: none;
}

.title-container {
  flex: 1;
  text-align: center;
}

.header h1 {
  color: #303133;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.subtitle {
  color: #606266;
  font-size: 1.2rem;
}

.format-card {
  max-width: 600px;
  margin: 2rem auto;
}

.format-options {
  margin-top: 2rem;
  text-align: center;
}

.label {
  margin-right: 1rem;
}

.preview-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.preview-item {
  text-align: center;
}

.preview-item img {
  max-width: 300px;
  max-height: 300px;
  object-fit: contain;
}

.preview-item p {
  margin-top: 1rem;
  color: #666;
}
</style> 